<template>
  <div
    :class="[layoutType == 'grid' ? 'data-list-grid' : '']"
    :style="{
      'grid-template-columns': `repeat(${gridCount} , 1fr)`
    }"
  >
    <template v-for="(item, index) in dataSource?.list" :key="index">
      <slot :data="item" name="default"></slot>
    </template>
  </div>
  <div class="bottom-loading" v-if="loading">
    <img :src="getLocalImage('playing.gif')" alt="" /> 数据加载中......
  </div>

  <div
    class="reach-bottom"
    v-if="
      (dataSource?.pageNo ?? 0) >= (dataSource?.pageTotal ?? 1) &&
      loadEnd &&
      dataSource?.list?.length
    "
  >
    {{ loadEnd }}
  </div>
  <no-data v-if="dataSource?.list && dataSource?.list.length == 0" />
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref, withDefaults } from 'vue'
import type { VideoInfo, VideoInfoPaginationResponse } from '@/services/api/home'
import { getLocalImage } from '@/utils/utilsFun'
import { mitter } from '@/eventbus/eventBus'
const props = withDefaults(
  defineProps<{
    dataSource: any
    loading?: boolean
    loadEnd?: string
    layoutType?: string
    gridCount?: number
  }>(),
  {
    dataSource: undefined,
    loadEnd: '已经到底了~~',
    layoutType: 'grid',
    gridCount: 5
  }
)
const emits = defineEmits(['loadData'])
const scrollHandler = (curScrollTop: number) => {
  if (window.innerHeight + curScrollTop < document.body.offsetHeight) {
    return
  }

  //如果是正在加载中(避免来回拖动到底部重复加载)
  if (props.loading || props.dataSource.pageNo >= props.dataSource.pageTotal) {
    return
  }
  //因为我是修改props里面的属性 没有修改dataSource这个数据
  //使用注释绕过检查
  // eslint-disable-next-line vue/no-mutating-props
  props.dataSource.pageNo++
  console.log('加载数据x')
  emits('loadData')
}

onMounted(() => {
  //监听滚动条
  mitter.on('windowScroll', (curScrollTop: any) => {
    scrollHandler(curScrollTop)
  })
})

onUnmounted(() => {
  mitter.off('windowScroll')
})
</script>

<style lang="less" scoped>
.data-list-grid {
  display: grid;
  grid-gap: 20px;
  padding-bottom: 10px;
}

.reach-bottom {
  text-align: center;
  line-height: 40px;
  color: var(--text3);
}
.bottom-loading {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text3);
  img {
    width: 20px;
    margin-right: 10px;
  }
}
</style>
